<template>
	<view>
		<view v-show="one">
			<view class="list_renzheng">
				<view class="list_details">
					<text>企业名称</text>
					<input v-model="coName" class="texts" type="text" value="" placeholder="请输入企业名称" />
				</view>
				<view class="list_details">
					<text>法人姓名</text>
					<input v-model="userName" class="texts" type="text" value="" placeholder="请输入法人姓名" />
				</view>
				<view class="list_details">
					<text>身份证号</text>
					<input v-model="idCard" class="texts" type="text" value="" placeholder="请输入身份证号" />
				</view>
				<view class="list_details">
					<text>联系方式</text>
					<input v-model="telPhone" class="texts" type="text" value="" placeholder="请输入联系方式" />
				</view>
				<view class="list_details">
					<text>信用代码</text>
					<input v-model="uscCode" class="texts" type="text" value="" placeholder="请输入统一社会信用代码" />
				</view>
				<view class="list_details">
					<text>经营地址</text>
					<input v-model="address" class="texts" type="text" value="" placeholder="请点击选择经营地址" />
				</view>
			</view>
			<view class="tishi">
				<text style="color: #000000;">上传凭证</text>
				<text>（上传的证件仅用于认证）</text>
			</view>
			<view class="imgpz">
				<view class="flo" @click="rxz(1)">
					<view class="list_t">
						<image class="photograph" src="../../../static/me/photograph.png" mode=""></image>
						<image class="img_col" :src="img1" mode=""></image>
					</view>
				</view>
				<view class="flo" @click="rxz(2)">
					<view class="list_t">
						<image class="photograph" src="../../../static/me/photograph.png" mode=""></image>
						<image class="img_col" :src="img2" mode=""></image>
					</view>
				</view>
				<view class="wenzi">上传身份证人像面</view>
				<view class="wenzi">上传身份证国徽面</view>
				<view class="flo" @click="rxz(3)">
					<view class="list_t">
						<image class="photograph" src="../../../static/me/photograph.png" mode=""></image>
						<image class="img_col" :src="img3" mode=""></image>
					</view>
				</view>
				<view class="flo" @click="rxz(4)">
					<view class="list_t">
						<image class="photograph" src="../../../static/me/photograph.png" mode=""></image>
						<image class="img_col" :src="img4" mode=""></image>
					</view>
				</view>
				<view class="wenzi">上传营业执照</view>
				<view class="wenzi">上传安全生产许可证</view>
			</view>
			<view class="btns">
				<button class="submot">提交申请</button>
			</view>
		</view>
		<view v-show="two" class="two">
			<view class="titles_two">
				<text class="titlebt">山东其布拉德脯肉麦克斯黑猪肉厂</text>
				<text class="texttime">郑青松 提交于2020.12.12 14:34</text>
				<text class="titlestatus">认证中</text>
			</view>
			<view class="two_list">
				<text class="two_left">姓名：</text>
				<text class="two_right">王大锤</text>
			</view>
			<view class="two_list">
				<text class="two_left">身份证号：</text>
				<text class="two_right">370828198902118729</text>
			</view>
			<view class="two_list">
				<text class="two_left">联系方式：</text>
				<text class="two_right">168 6688 7780</text>
			</view>
			<view class="two_list">
				<text class="two_left">统一社会信用代码：</text>
				<text class="two_right">NS9291029920129012</text>
			</view>
			<view class="two_list">
				<text class="two_left">经营地址：</text>
				<text class="two_right">山东省济南市长清区王家埠这里全是猪不好吃不要钱村飞猪路128号银座斜对面</text>
			</view>
			<view class="two_img">
				<image src="" mode=""></image>
				<text>身份证人像面</text>
			</view>
			<view class="two_img">
				<image src="" mode=""></image>
				<text>身份证国徽面</text>
			</view>
			<view class="two_img">
				<image style="height: 967rpx;" src="" mode=""></image>
				<text>营业执照</text>
			</view>
			<view class="two_img">
				<image src="" mode=""></image>
				<text>安全生产许可证</text>
			</view>
		</view>
	</view>

</template>

<script>
	// 以下路径需根据项目实际情况填写
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				one: true,
				two: false,
				industryLists: [],
				industry: [],
				img: '/static/me/photograph.png', //摄像照
				userName: '', //法人名称
				idCard: '', //身份证号
				uscCode:'',//信用代码
				telPhone: '', //联系方式
				coName: '', //企业名称
				address: '', //经营地址
				img1: '/static/me/rx.png', //身份证人像面
				img2: '/static/me/gh.png', //身份证国徽面
				img3: '/static/me/yyzz.png', //营业执照照片（base64）
				img4: '/static/me/aqsc.png' //门头照片（商家）/生产许可证（企业）（base64）
			}
		},
		onLoad(parameter) {
			if(parameter.pages == '未认证'){
				this.two=false
				this.one=true
			}else{
				this.one=false
				this.two=true
			}
			this.industryList()
		},
		methods: {
			rxz(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						// 下面 本地地址ok
						this.imageList = chooseImageRes.tempFilePaths[0];
						pathToBase64(this.imageList).then(base64 => {
								console.log(base64)
								if(index == 1){
									this.img1=base64
								}else if(index == 2){
									this.img2=base64
								}else if(index == 3){
									this.img3=base64
								}else if(index == 4){
									this.img4=base64
								}
							})
							.catch(error => {
								console.error(error)
							})
					}
				});
			},
			// 经营地址
			addres(){
				var that=this
				uni.chooseLocation({
				    success: function (res) {
						that.address=res.address
						console.log(that.address)
				        // console.log('位置名称：' + res.name);
				        // console.log('详细地址：' + res.address);
				        // console.log('纬度：' + res.latitude);
				        // console.log('经度：' + res.longitude);
				    },
				});
			},
			sumbits(){
				this.$http.req.ajax({
					path: ':8066/web/lxUser/applyRna',
					data:{
						rnaType:'3',
						coName: this.coName,
						userName:this.userName,
						idCard:this.idCard,
						telPhone:this.telPhone,
						uscCode:this.uscCode,
						address:this.address,
						img1:this.img1,
						img2:this.img2,
						img3:this.img3,
						img4:this.img4
					},
					afterAjax: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}
	.list_renzheng {
		width: 750rpx;
		background: #FFFFFF;
		margin-top: 1rpx;
	}

	.list_details {
		width: 699rpx;
		height: 105rpx;
		margin: auto;
		display: block;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.list_details text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		opacity: 1;
		float: left;
		line-height: 105rpx;
	}

	.texts {
		width: 525rpx;
		height: 105rpx;
		line-height: 105rpx;
		float: right;
		font-size: 25rpx;
	}

	.tishi {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F24343;
		opacity: 1;
		margin-top: 25rpx;
		margin-left: 21rpx;
	}

	.imgpz {
		width: 750rpx;
		height: 684rpx;
		background: #FFFFFF;
		padding-left: 21rpx;
		padding-top: 25rpx;
	}

	.img_col {
		width: 344rpx;
		height: 217rpx;
		opacity: 0.35;
	}

	.list_t {
		width: 344rpx;
		height: 217rpx;
		float: left;
		background: rgba(0, 0, 0, 0.35);
		margin-right: 18rpx;
	}

	.list_t {
		text-align: center;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		margin-top: 25rpx;
	}

	.list_t text {
		opacity: 0.5;
		margin-top: 14px;
		display: block;
	}

	.photograph {
		position: absolute;
		z-index: 999;
		width: 72rpx;
		height: 72rpx;
		padding-left: 135rpx;
		padding-top: 72rpx;
	}

	.two_list {
		width: 699rpx;
		height: 28rpx;
		padding-top: 18rpx;
		display: block;
		margin: auto;
	}

	.two {
		margin-top: 1rpx;
		width: 750rpx;
		background: #FFFFFF;
	}

	.two_left {
		float: left;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 1;
	}

	.two_right {
		float: right;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.5;
		width: 413rpx;
		text-align: right;
	}

	.two_img {
		width: 750rpx;
		background: #FFFFFF;
		padding-top: 28px;
	}

	.two_img image {
		width: 699rpx;
		height: 442rpx;
		background: #EEEEEE;
		margin: auto;
		display: block;
		margin-top: 36rpx;
	}

	.two_img text {
		width: 750rpx;
		height: 96rpx;
		display: block;
		background: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		line-height: 96rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.5;
		float: left;
	}

	.btns {
		width: 750rpx;
		background-color: #FFFFFF;
		height: 105rpx;
		margin-top: 39rpx;
	}

	.submot {
		width: 699rpx;
		height: 79rpx;
		line-height: 79rpx;
		background: linear-gradient(206deg, #FCCA22 0%, #FFE246 100%);
		opacity: 1;
		border-radius: 39rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		position: relative;
		top: 7px;
	}

	.titles_two {
		width: 699rpx;
		height: 193rpx;
		border-bottom: 1rpx solid #f5f5f5;
		margin: auto;
	}

	.titlebt {
		font-size: 43rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		text-align: center;
		display: block;
		padding-top: 34rpx;
	}

	.texttime {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 17px;
		color: #21201D;
		opacity: 0.35;
		margin-left: 117rpx;
		margin-right: 36rpx;
		margin-top: 25rpx;
		display: inline-block;
	}

	.titlestatus {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FCA022;
		opacity: 1;
	}

	.wenzi {
		width: 344rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		opacity: 0.5;
		text-align: center;
		float: left;
		margin-right: 9px;
		margin-top: 25rpx;
		margin-bottom: 43rpx;
	}

	.flo {
		float: left;
	}
</style>
